{extend name="base" /}
{block name="css"}
{css href="__CSS__/pay.css,__CSS__/zhifu.css" /}
<style>.weui-cell_primary{text-align: center;}.layui-upload-file{opacity: 0;height: 0;}</style>
{/block}
{block name="body"}
<!-- 主要内容 开始 -->
<div class="weui-tab__bd-item">
  <header class="weui-navBar weui-navBar-fixed">
    <a href="javascript:history.go(-1);" class="weui-navBar-item">
      <i class="icon iconfont icon-fanhui"></i>
    </a>
    <div class="weui-center">
      <span class="weui-center-title">充值</span>
    </div>
    <a href="recharge_log.html" class="weui-navBar-item">
      记录
    </a>
  </header>
  <div class="weui-cells weui-cells_form">
    <div class="weui-pay-inner">
      <h1 class="weui-pay-title">付款金额(元)</h1>
      <div class="weui-pay-input"> <strong class="weui-pay-strong">￥</strong>
        <input type="number" pattern="[0-9]*" name="money" class="weui-pay-inputs" placeholder="请输入金额"></div>
      <div class="weui-pay-intro">最多可输入金额50000元</div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">上传凭证</label></div>
      <div class="weui-cell__bd">
        <!--weui-uploader 照片上传功能-->
        <div class="weui-uploader">
            <div class="weui-uploader__bd">
                <div class="weui-uploader__files">
                    <view class="weui-uploader__file" id="uploaderFiles" style="background-image: url();"></view>
                </div>
              <div class="weui-uploader__input-box">
                <input id="uploaderInput" class="weui-uploader__input" type="file" value="" accept="image/*" multiple="">
              </div>
            </div>
        </div>
        <!--weui-uploader 照片上传功能 END-->
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label for="date" class="weui-label">收款方式</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input" id="recharge_type" placeholder="请选择收款方式" type="text" value="">
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">转账人姓名</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="text" id="name" placeholder="请输入转账人姓名">
      </div>
    </div>
    <div class="weui-btn-area">
        <button class="weui-btn weui-btn_default weui-btn_disabled">立即支付</button>
    </div>
  </div>
  <div class="divFooter"></div>
</div>
<!-- 主要内容 结束 -->
<!--浮动层-->
<div class="ftc_wzsf">
  <div class="srzfmm_box">
    <div class="qsrzfmm_bt clear_wl">
      <img src="/static/images/xx_03.jpg" class="tx close fl">
      <span class="fl">请输入支付密码</span></div>
    <div class="zfmmxx_shop">
      <div class="demos-title f-dary">{$info.good_name|default=''}</div>
      <div class="zhifu_price f-red">￥{$info.order_amount|default=''}</div></div>
    <ul class="mm_box">
      <li></li><li></li><li></li><li></li><li></li><li></li>
    </ul>
  </div>
  <div class="numb_box">
    <div class="xiaq_tb">
      <img src="/static/images/jftc_14.jpg" height="10"></div>
    <ul class="nub_ggg">
      <li><a href="javascript:void(0);" class="zf_num">1</a></li>
      <li><a href="javascript:void(0);" class="zj_x zf_num">2</a></li>
      <li><a href="javascript:void(0);" class="zf_num">3</a></li>
      <li><a href="javascript:void(0);" class="zf_num">4</a></li>
      <li><a href="javascript:void(0);" class="zj_x zf_num">5</a></li>
      <li><a href="javascript:void(0);" class="zf_num">6</a></li>
      <li><a href="javascript:void(0);" class="zf_num">7</a></li>
      <li><a href="javascript:void(0);" class="zj_x zf_num">8</a></li>
      <li><a href="javascript:void(0);" class="zf_num">9</a></li>
      <li><a href="javascript:void(0);" class="zf_empty">清空</a></li>
      <li><a href="javascript:void(0);" class="zj_x zf_num">0</a></li>
      <li><a href="javascript:void(0);" class="zf_del">删除</a></li>
    </ul>
  </div>
  <div class="hbbj"></div>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
  $(function(){
    var payimg = '';
    //上传图片
    $('#uploaderInput').on('change', function (event) {
        var files = event.target.files;
        var formData = new FormData();
        formData.append('file', files[0]);
        $.ajax({
          url: "upload.html",
          type: 'POST',
          data: formData,
          contentType:false,
          processData:false,
          success: function(res){
            if(res.code ==0) return $.toast(res.msg,'text');
            payimg = res.url;
            $("#uploaderFiles").css("background-image","url("+res.url+")")
          }
        });
    });
    $('.weui-pay-inputs').on('input', function(){
      if ($('.weui-pay-inputs').val()){
        $('.weui-btn').removeClass("weui-btn_disabled").addClass("ljzf_but");
        //出现浮动层
        $(".ljzf_but").click(function(){
          var name = $.trim($('#name').val());
          var num = $('.weui-pay-inputs').val();
          var recharge_type = $.trim($('#recharge_type').val());
          if(!num || !/^(([1-9]\d*)|\d)(\.\d{1,2})?$/.test(num)) return $.toast('请输入转账金额','text');
          else if (!recharge_type) return $.toast('请选择收款方式','text');
          else if (num>50000) return $.toast('单次充值金额不超过5万元','text');
          else if (!name) return $.toast('转账人姓名不能为空','text');
          $(".f-dary").html('转账给'+$('#name').val());
          $(".f-red").html('￥'+$('.weui-pay-inputs').val());
          $(".ftc_wzsf").show();
        });
      }else{
        $('.weui-btn-area').html('<button class="weui-btn weui-btn_default weui-btn_disabled">立即支付</button>');
      }
    });
    //关闭浮动
    $(".close").click(function(){
      $(".ftc_wzsf").hide();
      $(".mm_box li").removeClass("mmdd");
      $(".mm_box li").attr("data","");
      i = 0;
    });
    //数字显示隐藏
    $(".xiaq_tb").click(function(){
      $(".numb_box").slideUp(500);
    });
    $(".mm_box").click(function(){
      $(".numb_box").slideDown(500);
    });
    var i = 0;
    $(".nub_ggg li .zf_num").click(function(){
      if(i<6){
        $(".mm_box li").eq(i).addClass("mmdd");
        $(".mm_box li").eq(i).attr("data",$(this).text());
        i++
        if (i==6) {
          setTimeout(function(){
            var data = "";
              $(".mm_box li").each(function(){
              data += $(this).attr("data");
            });
            var name = $.trim($('#name').val());
            var num = $('.weui-pay-inputs').val();
            var recharge_type = $.trim($('#recharge_type').val());
            // var payimg = $("#payimg").val();
            if(!data) return $.toast('密码不能为空哟','text');
            else if(data.length<6) return $.toast('请输入六位以上密码哟','text');
            else $.post('',{pwd:data,num:num,img: payimg,name:name,recharge_type:recharge_type},function(res) {
              if (res.code === 1) {
                $.toast(res.msg,'text');
                setTimeout(function(){
                  $.hideLoading();
                  location.href = res.url;
                },1500);
              } else {
                $.toast(res.msg,'text');
              }
            });
          },100);
        };
      }
    });
    $(".nub_ggg li .zf_del").click(function(){
      if(i>0){
        i--
        $(".mm_box li").eq(i).removeClass("mmdd");
        $(".mm_box li").eq(i).attr("data","");
      }
    });

    $(".nub_ggg li .zf_empty").click(function(){
      $(".mm_box li").removeClass("mmdd");
      $(".mm_box li").attr("data","");
      i = 0;
    });
    $("#recharge_type").picker({
      title: "请选择收款方式",
        cols: [
          {
            textAlign: 'center',
            values: ['对公账户', '支付宝', '微信支付', '聚合码']
          }
        ]
    });
  });
</script>
{/block}